<template>
    <div>
        <el-card class="crumbs-card">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/main/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/main/batch-list' }">批次列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-card>
        <el-card class="container">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input v-model="query.name" size="small" placeholder="请输入批次名"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-date-picker
                            size="small"
                            v-model="timeValue"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="申请开始日期"
                            end-placeholder="申请结束日期">
                    </el-date-picker>
                </el-col>
                <el-col :span="4">
                    <el-select size="small" v-model="query.difficultyLevel" placeholder="请选择困难等级">
                        <el-option
                                v-for="item in difficultyLevels"
                                :key="item.id"
                                :label="item.itemName"
                                :value="item.itemValue">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select size="small" v-model="query.active" placeholder="请选择激活状态">
                        <el-option
                                v-for="item in actives"
                                :key="item.value"
                                :label="item.lable"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button size="small" type="primary" @click="queryBatch">查询</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="batchList"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="批次名字"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="applicationStartDate"
                        label="申请开始时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="applicationEndDate"
                        label="申请结束时间">
                </el-table-column>
                <el-table-column
                        prop="difficultyValue"
                        label="困难等级">
                </el-table-column>
                <el-table-column
                        label="激活状态">
                    <template slot-scope="scope">
                        <el-tag type="success" effect="light" v-if="scope.row.active" >启用</el-tag>
                        <el-tag type="danger" effect="light" v-else >禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        >
                    <template slot-scope="scope">
                        <el-button @click="detail(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    :current-page="query.pageNo"
                    :page-sizes="[10, 20, 40, 100]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="query.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {batchList} from '@/api/batch'
import {getDictionaies} from '@/api/dictionary'
import moment from 'moment'
export default {
  name: 'BatchList',
  data: function () {
    return {
      actives: [{value: 0, lable: '未激活'}, {value: 1, lable: '激活'}],
      batchList: [],
      timeValue: '',
      difficultyLevels: [],
      query: {
        difficultyLevel: '',
        active: '',
        name: '',
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created: function () {
    this.getBatchList()
    this.getDiffValues()
  },
  methods: {
    // 条件查询
    queryBatch () {
      if (this.timeValue) {
        this.query.applicationStartDate = moment(this.timeValue[0]).format('YYYY-MM-DD')
        this.query.applicationEndDate = moment(this.timeValue[1]).format('YYYY-MM-DD')
      } else {
        this.query.applicationStartDate = null
        this.query.applicationEndDate = null
      }
      console.info(this.query)
      this.getBatchList()
    },
    // 获取困难等级的数据字典
    getDiffValues () {
      getDictionaies('DIFFICULTY').then(res => {
        this.difficultyLevels = res.data
      })
    },
    // 获取批次
    getBatchList () {
      batchList(this.query).then(res => {
        this.batchList = res.data.records
        this.query.total = res.data.total
      })
    },
    detail (obj) {
      console.info(obj)
    },
    // 页面大小改变
    sizeChange (pageSize) {
      this.query.pageSize = pageSize
      this.getBatchList()
    },
    // 页码改变
    currentChange (pageNo) {
      this.query.pageNo = pageNo
      this.getBatchList()
    }
  }
}
</script>

<style scoped>

</style>
